/** 
 * 功能角色 
 */
<template>
   <vp-main-page @refresh="loadDataList" :custom="false">
		<template #search>
			<el-form label-suffix=":"  ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="handleSearch" label-width="120px">
				<vp-search-row >
					<vp-search-col :span="2">
						<el-form-item prop="keyword">
							<template #label><vp-label-keyword/></template>
							<el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
					</vp-search-col>
				</vp-search-row>		
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'systemRole.edit'"  @click="handleAdd"/>
		</template>
		<template #table>
			<vp-table :data="tableData" v-loading = "loading" stripe border @sort-change="handleSortChange"  ref="tableRef"   style="width: 100%;" row-key="id">
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column :label="$t('role.roleCode')" 
					prop="role_code" sortable="custom"
					show-overflow-tooltip  width="100"
				>
					<template #header><vp-label zh="编码" en="Code"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.roleCode)"/>
					</template>
				</el-table-column>
				<el-table-column :label="$t('role.roleName')" 
					prop="role_name" sortable="custom"
					show-overflow-tooltip  width="200"
				>
					<template #header><vp-label zh="名称" en="Name"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.roleName)"/>
					</template>
				</el-table-column>
				<el-table-column :label="$t('item.remark')" prop="roleRemark" show-overflow-tooltip  width="300">
					<template #header><vp-label zh="备注" en="Remark"/></template>
				</el-table-column>
				<el-table-column :label="$t('role.btn.permission')"  width="300">
					<template #header><vp-label zh="功能" en="Permissions"/></template>
					<template #default="scope">
						<el-tree :data="scope.row.treeNodeVOS"
							ref = "treeRef"
							node-key="id"
							:check-strictly="true"
						>
							<template #default="{node, data}">
								{{ node.label + (data.type === '1' ? ("/" +data.labelEn): "" ) }}
							</template>
						</el-tree>
					</template>
				</el-table-column>
				<el-table-column :label="$t('role.btn.user')"  width="200">
					<template #header><vp-label zh="用户" en="Users"/></template>
					<template #default="scope">
						<el-space wrap :size="3" alignment="flex-start">
							<span v-for="item in scope.row.roleUserVOS" :key="item.id">{{ item.name }}</span>
						</el-space>
					</template>
				</el-table-column>
				<el-table-column :label="$t('item.operations')" fixed="right"  width="250">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn text type="primary" v-auth="'systemRole.edit'"  @click="handleEditPermission(scope.row)"><vp-label zh="权限配置" en="Perm Config"/></vp-btn>
							<vp-btn text type="primary" v-auth="'systemRole.edit'"  @click="handleUser(scope.row)"><vp-label zh="用户配置" en="User Config"/></vp-btn>
							<vp-btn-edit text v-auth="'systemRole.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-del v-if="scope.row.lx!==1" text v-auth="'systemRole.edit'" @click="handleDel(scope.row)"/>
						</el-space>
					</template>
				</el-table-column>
			</vp-table>
		</template>
		<EditRole ref="editDialogRef" @formSubmited="handleFormSubmited">
		</EditRole>
		<EditPermission ref="editPermissionRef" @formSubmited="handleFormSubmited">
		</EditPermission>
		<EditRoleUser ref="editRoleUserRef" @formSubmited="handleFormSubmited"></EditRoleUser>
	</vp-main-page>
</template>
<script setup lang="ts" name="functionRoleTable">
import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import { DEFAULT_PAGE } from '/@/utils/page';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';

const EditRole = defineAsyncComponent(() => import('./EditRole.vue'));
const EditPermission = defineAsyncComponent(() => import('./EditPermission.vue'));
const EditRoleUser = defineAsyncComponent(() => import('./EditRoleUser.vue'));

	const searchForm = reactive({
		keyword: "",
	});

	const loading = ref(false);
	const tableData = ref([]);
	const page = reactive({
		...DEFAULT_PAGE,
	})

	const loadDataList = () => {
		loading.value = true
		request.get('/system/role/list', {
			params: {
				...searchForm,
				...page,
			}
		}).then(res => {
			tableData.value = res?.data || []
		}).finally(()=>{
			loading.value = false
		})
	}
	const searchFormRef = ref();

	const handleSearch = ()=>{
		loadDataList()
	}
	const handleSearchReset = ()=>{
		searchFormRef.value.resetFields();
	}
	const handleSortChange = (column: any)=>{
		page.sortColumn = column.prop;
		page.sortOrder = column.order == 'descending' ? 'desc': 'asc'
		loadDataList()
	}

	watch(()=>page.pageNum, ()=>{
		loadDataList()
	})

	onMounted(() => {
		loadDataList()
	})

	const editDialogRef = ref();
	const handleFormSubmited = ()=>{
		loadDataList();
	}

	const handleAdd = ()=>{
		editDialogRef.value.handleOpen(1, 'add');
	}
	const handleEdit = (row: any)=>{
		editDialogRef.value.handleOpen(1, 'edit', row.id);
	}
	const handleDel = (row: any)=>{
		VpMessageBox.confirmDelete().then(()=>{
			request.delete(`/system/role/${row.id}`).then(res => {
				loadDataList();
			})
		});
	}

	const editPermissionRef = ref();
	const handleEditPermission = (row: any)=>{
		editPermissionRef.value.handleOpen(row.id);
	}

	const editRoleUserRef = ref();
	const handleUser = (row: any)=>{
		editRoleUserRef.value.handleOpen({
			id: row.id,
		});
	}

	const tableRef = ref();


</script>